import { trigger, state, style, transition, animate, group, AnimationTriggerMetadata } from '@angular/animations';
import { MotionDuration, MotionFunc } from '../core/animation/api';
export const messageWrapper: AnimationTriggerMetadata = trigger('messageWrapper', [
  state(
    'topIn',
    style({
      transform: 'translateY(0)',
      opacity: 1,
    }),
  ),
  state(
    'topOut',
    style({
      transform: 'translateY(-1.5rem)',
      opacity: 0,
      margin: 0,
    }),
  ),
  state(
    'rightIn',
    style({
      transform: 'translateX(0)',
      opacity: 1,
    }),
  ),
  state(
    'rightOut',
    style({
      transform: 'translateX(1.5rem)',
      opacity: 0,
      margin: 0,
    }),
  ),
  transition('topOut => topIn', [
    group([
      animate(
        `${MotionDuration.MD} ${MotionDuration.XSS} ${MotionFunc.EASE}`,
        style({
          transform: 'translateX(0)',
        }),
      ),
      animate(
        `${MotionDuration.MD} ${MotionDuration.XSS} ${MotionFunc.EASE_IN_OUT}`,
        style({
          opacity: 1,
        }),
      ),
    ]),
  ]),
  transition('topIn => topOut', [
    group([
      animate(
        `${MotionDuration.SM} ${MotionFunc.EASE_IN_OUT}`,
        style({
          opacity: 0,
        }),
      ),
    ]),
  ]),
  transition('rightOut => rightIn', [
    group([
      animate(`${MotionDuration.LG} ${MotionFunc.EASE}`, style({ margin: '*' })),
      animate(
        `${MotionDuration.MD} ${MotionDuration.XSS} ${MotionFunc.EASE}`,
        style({
          transform: 'translateX(0)',
        }),
      ),
      animate(
        `${MotionDuration.MD} ${MotionDuration.XSS} ${MotionFunc.EASE_IN_OUT}`,
        style({
          opacity: 1,
        }),
      ),
    ]),
  ]),
  transition('rightIn => rightOut', [
    group([
      style({ height: '*', margin: '*' }),
      animate(
        `${MotionDuration.MD} ${MotionFunc.EASE_IN_OUT}`,
        style({
          opacity: 0,
        }),
      ),
      animate(`${MotionDuration.MD} ${MotionDuration.XS} ${MotionFunc.EASE}`, style({ height: 0, margin: 0 })),
    ]),
  ]),
]);

export const messageContent: AnimationTriggerMetadata = trigger('messageContent', [
  transition(':enter', [
    style({ height: 0, overflow: 'hidden', padding: '0 0.16rem' }),
    animate(`${MotionDuration.LG} ${MotionFunc.EASE}`, style({ height: '*', padding: '*' })),
  ]),
]);
